<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}



			a {
				/* 元素以块级元素的特征存在 */
				display: block;
				background-color: yellow;
				width: 300px;
				height: 300px;
				margin-top: 50px;
				margin-bottom: 50px;
				/*margin-right: 50px;*/
				/*padding-top: 50px;*/
				/*padding-bottom: 50px;*/
			}

			p {
				background-color: pink;
			}
			
			/* 解决换行被解析问题 */
			div {
				font-size: 0;
			}

			div>a {
				font-size: 16px;
			}

			p {
				height: 500px;
				/* 
					让元素以行内元素的特征呈现
				 */


				/*display: inline;*/
				display: inline-block;
			}



			

		</style>
	</head>
	<body>

		<!-- 
			块级元素:
				 1. 独占一行(宽度默认撑满父级)
				 2. 如果不设置高度, 高度由内容撑起
				 3. 支持所有的css样式设置
				
				常见的块级元素
				 div, p, h1~h6, ul, li, ol, dl, dt, dd, table, form

			行内元素:
			     1. 可以同排显示
			     2. 换行被解析
			     3. 宽高由内容决定
			     4. 不支持宽高设置, 不支持margin-top, margin-bottom, padding-top, padding-bottom设置

				常见的行内元素
				a, span, strong, em, input, img, td, label, select

			inline-block: 行内块元素
				1. 支持所有的CSS样式设置
				2. 如果不设置宽高, 宽高由内容决定
				3. 换行被解析
				4. 可以同排显示

		 -->

		<div>
			<a href="">徐旺, 你好贱!</a> 
			<a href="">马超群, 你好cool!</a>
		</div>
		<p>晓惠, 你好聪明!</p>
		<p>顾凯, 你好帅!</p>

		

		
	</body>
</html>